{{csrf_field()}}
<div class="layui-form-item">
    <label for="" class="layui-form-label">分类</label>
    <div class="layui-input-inline">
        <select name="cate_id">
            @foreach($cates as $cate)
                <option value="{{ $cate->id }}" @if(isset($product->cate_id)&&$product->cate_id==$cate->id)selected @endif >{{ $cate->name }}</option>
            @endforeach
        </select>
    </div>
</div>

<div class="layui-form-item">
    <label for="" class="layui-form-label">名称</label>
    <div class="layui-input-block">
        <input type="text" name="title" value="{{$product->title??old('title')}}" lay-verify="required" placeholder="请输入商品名称" class="layui-input" >
    </div>
</div>

<div class="layui-form-item">
    <label for="" class="layui-form-label">简介</label>
    <div class="layui-input-block">
        <input type="text" name="description" value="{{$product->description??old('description')}}" placeholder="请输入商品简介" class="layui-input" >
    </div>
</div>

<div class="layui-form-item">
    <label for="" class="layui-form-label">规格设置</label>
    <div class="layui-input-block">
        <div id="toolbar">
            <div>
                <button type="button" class="layui-btn layui-btn-sm" data-type="addRow" title="添加一行">
                    <i class="layui-icon layui-icon-add-1"></i> 添加一行
                </button>
            </div>
        </div>
        <div id="tableRes" class="table-overlay">
            <table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">秒杀时间</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="miaosha_start" id="miaosha_start" placeholder="开始时间">
    </div>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="miaosha_end" id="miaosha_end" placeholder="结束时间">
    </div>
    <label class="layui-form-label">仅秒杀商品</label>
</div>

<div class="layui-form-item">
    <div class="layui-inline">
        <label for="" class="layui-form-label">核销方式</label>
        <div class="layui-input-block">
            <input type="radio" name="hexiaoType" value="1" title="到店核销" checked="" />
            <input type="radio" name="hexiaoType" value="2" title="物流快递" />
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">截止时间</label>
        <div class="layui-input-inline">
            <input type="text" name="hexiao_end" id="hexiao_end" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">核销手机</label>
        <div class="layui-input-inline">
            <input type="text" name="hexiao_mobile" class="layui-input">
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label for="" class="layui-form-label">缩略图</label>
    <div class="layui-input-block">
        <div class="layui-upload">
            <button type="button" class="layui-btn layui-btn-sm uploadPic"><i class="layui-icon">&#xe67c;</i>图片上传</button>
            <div class="layui-upload-list" >
                <ul class="layui-upload-box layui-clear">
                    @if(isset($article->thumb))
                        <li><img src="{{ $article->thumb }}" /><p>上传成功</p></li>
                    @endif
                </ul>
                <input type="hidden" name="thumb" class="layui-upload-input" value="{{ $article->thumb??'' }}">
            </div>
        </div>
    </div>
</div>

{{--<div class="layui-form-item">
    <label for="" class="layui-form-label">内容</label>
    <div class="layui-input-block">
        <script id="container" name="content" type="text/plain" style="width: 98%">
            {!! $article->content??old('content') !!}
        </script>
    </div>
</div>

<div class="layui-form-item">
    <label for="" class="layui-form-label">外链</label>
    <div class="layui-input-block">
        <input type="text" name="link" value="{{$article->link??''}}" placeholder="资讯外部链接，可为空" class="layui-input" >
    </div>
</div>

<div class="layui-form-item">
    <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="formDemo">确 认</button>
        <a class="layui-btn" href="{{route('product.index')}}" >返 回</a>
    </div>
</div>--}}
@section('script')
    <script type="text/javascript">
        //准备视图对象
        window.viewObj = {
            //初始化数据
            tbData: [],
        };

        //layui 模块化引用
        layui.use(['jquery', 'table', 'layer','laydate'], function(){
            let $ = layui.$, table = layui.table, form = layui.form, layer = layui.layer, laydate = layui.laydate;
            laydate.render({elem:'#miaosha_start',type:'datetime'});
            laydate.render({elem:'#miaosha_end',type:'datetime'});
            laydate.render({elem:"#hexiao_end",type:"datetime"});
            //数据表格实例化
            let tbWidth = $("#tableRes").width();
            let layTableId = "layTable";
            let tableIns = table.render({
                elem: '#dataTable',
                id: layTableId,
                data: viewObj.tbData,
                width: tbWidth,
                page: false,
                loading: true,
                even: false, //不开启隔行背景
                cols: [[
                    {title: '序号', type: 'numbers'},
                    {field: 'title', type: "string", title: '规格名称', edit: "text"},
                    {field: 'origin_price', type: "float", title: '原价', edit: 'text'},
                    {field: 'sold_price', type: "float", title: '售价', edit: 'text'},
                    {field: 'stock', title: '库存', edit: 'text'},
                    {
                        field: 'tempId', title: '操作', templet: function (d) {
                            return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.tempId + '"><i class="layui-icon layui-icon-delete"></i>移除</a>';
                        }
                    }
                ]],
                done: function (res, curr, count) {
                    viewObj.tbData = res.data;
                }
            });

            //定义事件集合
            let active = {
                addRow: function(){	//添加一行
                    let oldData = table.cache[layTableId];

                    //console.log('1、oldData:',oldData);

                    let newRow = {tempId: new Date().valueOf(), title: '请填写名称', origin_price:0.00,sold_price:0.00,stock:0};
                    oldData.push(newRow);

                    //console.log('2、oldData:',oldData);

                    tableIns.reload({
                        data : oldData
                    });
                },
                updateRow: function(obj){
                    let oldData = table.cache[layTableId];
                    console.log(oldData);
                    for(let i=0, row; i < oldData.length; i++){
                        row = oldData[i];
                        if(row.tempId == obj.tempId){
                            $.extend(oldData[i], obj);
                            return;
                        }
                    }
                    tableIns.reload({
                        data : oldData
                    });
                },
                removeEmptyTableCache: function(){
                    let oldData = table.cache[layTableId];
                    for(let i=0, row; i < oldData.length; i++){
                        row = oldData[i];
                        if(!row || !row.tempId){
                            oldData.splice(i, 1);    //删除一项
                        }
                        continue;
                    }
                    tableIns.reload({
                        data : oldData
                    });
                },
            }

            //激活事件
            let activeByType = function (type, arg) {
                if(arguments.length === 2){
                    active[type] ? active[type].call(this, arg) : '';
                }else{
                    active[type] ? active[type].call(this) : '';
                }
            }

            //注册按钮事件
            $('.layui-btn[data-type]').on('click', function () {
                let type = $(this).data('type');
                activeByType(type);
            });


            //监听工具条
            table.on('tool(dataTable)', function (obj) {
                let data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
                console.log(data);
                switch(event){
                    case "del":
                        layer.confirm('确定删除该行吗？', function(index){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            activeByType('removeEmptyTableCache');
                        });
                        break;
                }
            });
        });
    </script>
@endsection
